<style lang="scss" scoped>
.c1 {
  padding: 10px;
  background: #fff;
  // margin-bottom: 10px;
}
.c2 {
  padding: 10px;
}
.c3 {
  margin-bottom: 10px;
}
.c4 {
  margin-top: 10px;
  flex-direction: row-reverse;
}

html.dark {
  .c1 {
    background: #222;
  }
}
</style>

<template>
  <!-- 条件筛选栏 -->
  <div class="c1" v-if="slotSearch">
    <slot name="search"></slot>
  </div>

  <div class="c2">
    <!-- 操作栏 -->
    <div class="c3" v-if="slotAction">
      <slot name="action"></slot>
    </div>

    <!-- 表格 -->
    <el-table
      :data="modelValue.lists"
      v-loading="modelValue.loading ?? false"
      style="width: 100%"
      stripe
      :max-height="getTableHeight"
      @selection-change="selectChecked"
    >
      <slot></slot>
    </el-table>

    <!-- 分页栏 -->
    <div class="flex c4">
      <el-pagination
        background
        @current-change="switchCurrentChange"
        @size-change="switchSizeChange"
        v-model:currentPage="pData.page"
        :default-page-size="pData.limit"
        layout="total, sizes,prev, pager, next"
        :total="modelValue.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { tableDataType } from "@/common/interface";
import { reactive } from "vue";

const emit = defineEmits<{
  (e: "update:modelValue", data: tableDataType<any>): void; //向父组件传递 勾选的数据
  (e: "getList", page: number, limit: number): void; //向父组件传递 需要请求分页数据
}>();

interface IProps {
  modelValue: tableDataType<any>;
}
const props = withDefaults(defineProps<IProps>(), {
  modelValue: () => new tableDataType(),
});

const pData = reactive({
  page: 1,
  limit: 20,
});

//判断插槽是否使用
const slotSearch = !!useSlots().search;
const slotAction = !!useSlots().action;

//计算表格高度
const getTableHeight = computed(() => {
  let h = "calc(100vh - 271px)";

  //根据插槽 是否使用来获取高度
  if (slotSearch && !slotAction) h = "calc(100vh - 240px)";
  if (!slotSearch && slotAction) h = "calc(100vh - 220px)";
  if (!slotSearch && !slotAction) h = "calc(100vh - 180px)";

  return h;
});

//获取勾选的数据
function selectChecked(data: any) {
  emit("update:modelValue", props.modelValue);
}

// 点击分页
function switchCurrentChange(val: number) {
  emit("getList", pData.page, pData.limit);
}

//切换每一条的条数
function switchSizeChange(val: number) {
  emit("getList", pData.page, pData.limit);
}

//刷新
function reload() {
  emit("getList", pData.page, pData.limit);
}

defineExpose({
  reload,
});

const useSlots=() =>{
throw new Error("Function not implemented.");
}

const  computed=(arg0: () => string) =>{
throw new Error("Function not implemented.");
}
</script>
